<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .w {
        width: 980px;
        margin: 0 auto;
      }
      .header {
        width: 100%;
        height: 50px;
        background-color: rgb(202, 106, 221);
        text-align: center;
        font-size: 30px;
        color: aliceblue;
        line-height: 50px;
      }
      .banner {
        width: 100%;
        height: 300px;
        background-color: rgb(79, 119, 204);
        margin: 10px 0;
        font-size: 30px;
        color: aliceblue;
        text-align: center;
        line-height: 300px;
      }
      .content {
        width: 100%;
        height: 900px;
        background-color: rgb(100, 214, 209);
        margin: 10px 0;
        font-size: 30px;
        color: aliceblue;
        text-align: center;
        line-height: 300px;
      }
      .bottom {
        width: 100%;
        height: 50px;
        background-color: rgb(194, 186, 78);
        text-align: center;
        font-size: 30px;
        color: aliceblue;
        line-height: 50px;
      }
      .slider-bar {
        width: 100px;
        height: 180px;
        background-color: rosybrown;
        text-align: center;
        font-size: 20px;
        color: aliceblue;
        line-height: 180px;
        position: absolute;
        right: 82px;
        bottom: 300px;
        
        /* display: none; */
      }
      .goBack{
        display: none;
      }
    </style>
  </head>
  <body>
    <div class="header">
      <div class="w">头部</div>
    </div>
    <div>
      <div class="w">
        <div class="banner">banner内容区域</div>
      </div>
    </div>
    <div>
      <div class="w">
        <div class="content">主体内容区域</div>
      </div>
    </div>
    <div class="bottom">
      <div class="w">底部内容区域</div>
    </div>
    <div class="slider-bar">
      <span class="goBack">返回顶部</span>
    </div>
    <script>
      let sliderbar = document.querySelector(".slider-bar");
      let banner = document.querySelector(".banner");
       let main=    document.querySelector(".content")
        let goBack=    document.querySelector(".goBack")
       let bannerTop=  banner.offsetTop
       let  sliderbarTop = sliderbar.offsetTop - bannerTop
       let mainTop=main.offsetTop;
      document.addEventListener("scroll", function () {
        console.log(window.pageYOffset);
        if (window.pageYOffset >= bannerTop ) {
          sliderbar.style.position = "fixed";
          sliderbar.style.Top = sliderbarTop + "px";
        } else {
          sliderbar.style.position = "absolute";
           sliderbar.style.Top = "300px";
        }
         if (window.pageYOffset >= mainTop ) {
           goBack.style.display="block"
        } else {
           goBack.style.display="none"
        }
      });
    </script>
  </body>
</html>
